<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="auto">
        <home-aside :isCollapse="isCollapse"></home-aside>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <home-header>
            <header-switch @changeIsCollapse="changeIsCollapse"></header-switch>
          </home-header>
        </el-header>
        <!-- 主要部分 -->
        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="fadeChange" appear mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts"  setup>
import { ref, defineAsyncComponent } from 'vue'
import HomeHeader from '@/components/home/HomeHeader.vue'
const HomeAside = defineAsyncComponent(() => import('@/components/home/HomeAside.vue'))

// 侧边栏小开关
const HeaderSwitch = defineAsyncComponent(() => import('@/components/decorate/HeaderSwitch.vue'))

const isCollapse = ref(localStorage.getItem('AsideSwitch') != 'true')

// 触发侧边栏开关
function changeIsCollapse(switchData: boolean): void {
  isCollapse.value = switchData
} 
</script>

<style lang="scss" scoped>
.el-header {
  border-bottom: 2px solid #dedede;
  line-height: 60px;
}
</style>